import {Button, StyleSheet, Text, TextInput, View} from 'react-native';
import React, {useState} from 'react';
import {NavigationProp, ParamListBase} from '@react-navigation/native';
interface Props {
  navigation: NavigationProp<ParamListBase>;
}
const Login: React.FC<Props> = ({navigation}) => {
  const [username, setUsername] = useState('');
  const [pass, setPass] = useState('');
  return (
    <View>
      <Text>Login</Text>
      <View>
        <View style={{flexDirection: 'row', alignItems: 'center'}}>
          <View style={{flex: 1}}>
            <Text>用户名</Text>
          </View>
          <View style={{flex: 5}}>
            <TextInput
              value={username}
              onChange={e => {
                setUsername(e.nativeEvent.text);
              }}></TextInput>
          </View>
        </View>
        <View style={{flexDirection: 'row', alignItems: 'center'}}>
          <View style={{flex: 1}}>
            <Text>密码</Text>
          </View>
          <View style={{flex: 5}}>
            <TextInput
              textContentType="password"
              value={pass}
              onChange={e => setPass(e.nativeEvent.text)}></TextInput>
          </View>
        </View>
      </View>

      <Button
        title="登录"
        onPress={() => navigation.navigate('BottomTabs')}></Button>
    </View>
  );
};

export default Login;

const styles = StyleSheet.create({});
